<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>开奖管理</el-breadcrumb-item>
                    <el-breadcrumb-item>香港六合彩</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">

                        <el-input style="width: 260px;" v-model="inputval" placeholder="请输入开奖期号" />
                        <div style="padding: 5px;"></div>
                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{scope.row.id}}</div>
                      </template>
                    </el-table-column>

                    <el-table-column label="游戏类型">
                        <template #default="scope">
                            <el-tag>香港六合彩</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="issue" label="开奖期号">
                      <template #default="scope">
                        <div style="font-weight: bold;">{{scope.row.issue}}</div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="number" label="开奖号码" >
                      <template #default="scope">
                        <div style="font-size: 18px; text-align: center; font-weight: bold;">{{ scope.row.number }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="end_time_text" label="官方开奖时间" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{ scope.row.end_time_text }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="系统开奖时间" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{ scope.row.time }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="创建时间">
                      <template #default="scope">
                        <div style="font-weight: bold;">{{scope.row.create_time}}</div>
                      </template>
                    </el-table-column>

                    <el-table-column label="开奖状态" width="200">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 1" type="danger" plain style="font-weight: bold;">进行中</el-tag>
                            <el-tag v-if="scope.row.status == 2" type="success" plain style="font-weight: bold;">已开奖</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="订单操作" width="220">
                        <template #default="scope">
                            <el-button type="success" @click="show_edit(scope.row)" v-if="scope.row.status != 2">官方时间更正</el-button>
                            <el-button type="success" @click="manual_lottery(scope.row)">手动开奖</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>

    <!-- 菜单权限管理 -->
    <el-dialog v-model="showDialog" title="手动开奖" center width="70%" :destroy-on-close="true">
        <el-form label-width="80px">

            <el-form-item label="开奖期号">
                <el-input v-model="formData.issue" :disabled="Boolean(formData.issue)" />
            </el-form-item>
            <el-form-item label="开奖号码">
              <div class="number_list">
                <el-input-number v-model="formData.numberArr[0]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[1]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[2]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[3]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[4]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[5]" :min="1" :max="49" />
                <el-input-number v-model="formData.numberArr[6]" :min="1" :max="49" />
              </div>
            </el-form-item>

        </el-form>

        <template #footer>
            <el-button type="primary" @click="formSubmit()">确定手动开奖</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="showEdit" title="时间更正" center width="500" :destroy-on-close="true">
        <el-form label-width="80px">
            <el-form-item label="停止时间">
                <el-date-picker v-model="editData.end_time" value-format="YYYY-MM-DD 21:30:00" format="YYYY-MM-DD 21:30:00" type="datetime" placeholder="开始日期" style="width: 180px;" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" :disabled="editData.end_time==null" @click="editSubmit()">确定修改</el-button>
        </template>
    </el-dialog>
	
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Search } from '@element-plus/icons-vue'

const showDialog = ref(false)
const tableData = reactive({ list: [] })
const formData = reactive({
    issue: '',
  numberArr: [1,2,3,4,5,6,7],
})

onMounted(() => {
    admin_xianggang_issue()
})

const showEdit = ref(false)
const editData = reactive({
	type: 'xglhc',
	id: '',
	end_time: 0,
})
function show_edit(item) {
    showEdit.value = true
	editData.id = item.id
	let number = []
	if(item.number){
		number = item.number.split(",");
	}


	editData.end_time = item.end_time_text || 0
}
function editSubmit() {

    request_post('/admin_issue_edit', editData).then((res) => {
        if (res.data.code == 200) {
            showEdit.value = false
			page.issue = ''
			page.pagenum = 1
			page.pagesize = 18
			page.total = 0
			admin_xianggang_issue()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

function manual_lottery(item) {
    showDialog.value = true
    formData.issue = item.issue

  let number = []
  if(item.number){
    number = item.number.split(",");
  }
  formData.numberArr[0] = parseInt(number[0]) || 1
  formData.numberArr[1] = parseInt(number[1]) || 2
  formData.numberArr[2] = parseInt(number[2]) || 3
  formData.numberArr[3] = parseInt(number[3]) || 4
  formData.numberArr[4] = parseInt(number[4]) || 5
  formData.numberArr[5] = parseInt(number[5]) || 6
  formData.numberArr[6] = parseInt(number[6]) || 7
}

function formSubmit() {
  formData.number = formData.numberArr.toString()
    request_post('/admin_xianggang_manual_issue', formData).then((res) => {
        if (res.data.code == 200) {
            showDialog.value = false
          page.pagenum = 1
          admin_xianggang_issue()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 搜索 
const inputval = ref('')
function inputSearch() {
    if (inputval.value == '') {
        return error('请输入代理UID')
    }
    page.issue = inputval.value
    admin_xianggang_issue()
}

// 获取用户列表
function admin_xianggang_issue() {

    request_post('/admin_xianggang_issue', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}


const page = reactive({
    issue: '',
    pagenum: 1,
    pagesize: 18,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_xianggang_issue()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_xianggang_issue()
}


</script>

<style>
.number_list{
  display: flex;
  align-items: center;
}
.number_list .el-input-number{
  width: 100px;
  margin-right: 15px;
}

</style>
